<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>login_ajax</title>
</head>
<body>

  <input id="username" type="text" name="username" required placeholder="请输入用户名">
  <input id="password" type="password" name="password" required placeholder="请输入密码">
  <input type="button" value="提交" onclick="submitForm();" />

  <!--使用原生ajax实现-->
  <!--
	<script>
		xhr = null;
		function submitForm() {
		    xhr =new XMLHttpRequest();
//		    xhr.open('GET','/account/login_ajax');
		    xhr.open('POST','/account/login_ajax');
			xhr.onreadystatechange = func;
			xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
			// dom方式获取表单值
			var f_username = document.getElementById('username').value;
			var f_password = document.getElementById('password').value;
//			xhr.send("username=abc;password=aaa");  // 多个参数用`;`隔开  参数类型为字符串
			xhr.send('username='+f_username+';password='+f_password);  // 拼接字符串
        }
        function func() {
			if(xhr.readyState == 4){
			    console.log(4);
			    console.log(xhr.responseText);
			    var data = xhr.responseText;
			    var ret_dict = JSON.parse(data);  // 将字符串转化为对象
				if(ret_dict.states){

				}else {
				    alert(ret_dict.message);
				}
			}
        }
	</script>
	-->

  <!--使用jquery实现ajax-->
  <script src="{{ static_url('js/jquery-1.11.3/jquery.min.js') }}" type="text/javascript"></script>
	<script>
		function submitForm() {
		    //		jquery方式获取表单值
			var f_username = $('#username').val();
			var f_password = $('#password').val();
			// {'username':'abc','password':'aaa'}  --为键值对
		    $.post('/account/login_ajax',{'username':f_username,'password':f_password},function (callback) {
				console.log(callback);
            })

        }
	</script>
</body>
</html>